<!DOCTYPE html>
<html>
  <head>
    <title>dom2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/test/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    function showInfo(element){
			alert("元素的节点类型："+element.nodeType+"\n"
					+"节点名："+element.nodeName+"\n"
					+"节点值："+element.nodeValue); //ELEMENT类型（1）
		}
    function editUser(btnobj)
    {
    	/*var testid =document.getElementsByName("userForm");
    	showInfo(userForm);*/
    	//showInfo(btnobj);
    	var parentTd=btnobj.parentNode; //获取按钮的上级td对象
    	//showInfo(parentTd);
		var trObj=parentTd.parentNode;  //获取td的上级tr对象
		//showInfo(trObj);
		var tds=trObj.childNodes; //tr的子节点集合
			/*for(var i=0;i<tds.length;i++){
				showInfo(tds[i]); 
			}*/
		var name=document.getElementById("uname");
		name.value=tds[1].innerHTML;
		//alert(name.value);
		var password=document.getElementById("upass");
		password.value=tds[3].innerHTML;
		var nan=document.getElementById("unan");
		var nv=document.getElementById("unv");
		if(tds[5].innerHTML=="男")
		{
			
			nv.checked=false;
			nan.checked=true;
		}
		else
		{
			nan.checked=false;
			nv.checked=true;
		}
		var youyong =document.getElementById("uyouyong");
		var yuedu =document.getElementById("uyuedu");
		var lanqiu=document.getElementById("ulanqiu");
		if(tds[7].innerHTML=="阅读,篮球")
		{
			yuedu.checked=true;
			lanqiu.checked=true;
			youyong.checked=false;
		}
		if(tds[7].innerHTML=="游泳")
		{
			yuedu.checked=false;
			lanqiu.checked=false;
			youyong.checked=true;
		}
		if(tds[7].innerHTML=="游泳,篮球")
		{
			yuedu.checked=false;
			youyong.checked=true;
			lanqiu.checked=true;
		}
		var job=document.getElementById("ujob");
		if(tds[9].innerHTML=="自由职业")
		{
			job.options[4].selected=true;
		}
		if(tds[9].innerHTML=="财务")
		{
			job.options[3].selected=true;
		}
		if(tds[9].innerHTML=="教师")
		{
			job.options[1].selected=true;
		}
		if(tds[9].innerHTML=="电器工程师")
		{
			job.options[2].selected=true;
		}
    
    }
    function saveUser(){
    	var name=document.getElementById("uname");
    	var password=document.getElementById("upass");
    	var nan=document.getElementById("unan");
		var nv=document.getElementById("unv");
		var youyong =document.getElementById("uyouyong");
		var yuedu =document.getElementById("uyuedu");
		var lanqiu=document.getElementById("ulanqiu");
		var job=document.getElementById("ujob");
		var table=document.getElementById("utable");
		if(name.value=="张三")
			{
				
				//alert(table.rows[0].cells[0].innerHTML);
				//table.rows[1].cells[1].innerHTML="";
				//alert(password.value);
				table.rows[1].cells[1].innerHTML=password.value;
				if(nan.checked==true)
					table.rows[1].cells[2].innerHTML="男";
				if(nv.checked==true)
					table.rows[1].cells[2].innerHTML="女";
				//alert(table.rows[1].cells[3].innerHTML);
				table.rows[1].cells[3].innerHTML="";
				//alert(table.rows[1].cells[3].innerHTML);
				if(youyong.checked==true)
				{
					
					if(table.rows[1].cells[3].innerHTML=="")
						{
							//alert(table.rows[1].cells[3].innerHTML);
							table.rows[1].cells[3].innerHTML="游泳";
							//alert(table.rows[1].cells[3].innerHTML);
						}
					else
					{
						table.rows[1].cells[3].innerHTML=str+",游泳";
					}
				}
				if(yuedu.checked==true)
				{
					var str=table.rows[1].cells[3].innerHTML;
					if(str=="")
						table.rows[1].cells[3].innerHTML="阅读";
					else
					{
						table.rows[1].cells[3].innerHTML=str+",阅读";
					}
				}
				if(lanqiu.checked==true)
				{
					var str=table.rows[1].cells[3].innerHTML;
					if(str=="")
						table.rows[1].cells[3].innerHTML="篮球";
					else
					{
						table.rows[1].cells[3].innerHTML=str+",篮球";
					}
				}
				if(job.options[1].selected==true)
					table.rows[1].cells[4].innerHTML="教师";
				if(job.options[2].selected==true)
					table.rows[1].cells[4].innerHTML="电器工程师";
				if(job.options[3].selected==true)
					table.rows[1].cells[4].innerHTML="财务";
				if(job.options[4].selected==true)
					table.rows[1].cells[4].innerHTML="自由职业";
			}
			if(name.value=="李娜")
			{
				
				//alert(table.rows[0].cells[0].innerHTML);
				//table.rows[1].cells[1].innerHTML="";
				//alert(password.value);
				table.rows[2].cells[1].innerHTML=password.value;
				if(nan.checked==true)
					table.rows[2].cells[2].innerHTML="男";
				if(nv.checked==true)
					table.rows[2].cells[2].innerHTML="女";
				//alert(table.rows[1].cells[3].innerHTML);
				table.rows[2].cells[3].innerHTML="";
				//alert(table.rows[1].cells[3].innerHTML);
				if(youyong.checked==true)
				{
					
					if(table.rows[2].cells[3].innerHTML=="")
						{
							//alert(table.rows[1].cells[3].innerHTML);
							table.rows[2].cells[3].innerHTML="游泳";
							//alert(table.rows[1].cells[3].innerHTML);
						}
					else
					{
						table.rows[2].cells[3].innerHTML=str+",游泳";
					}
				}
				if(yuedu.checked==true)
				{
					var str=table.rows[2].cells[3].innerHTML;
					if(str=="")
						table.rows[2].cells[3].innerHTML="阅读";
					else
					{
						table.rows[2].cells[3].innerHTML=str+",阅读";
					}
				}
				if(lanqiu.checked==true)
				{
					var str=table.rows[2].cells[3].innerHTML;
					if(str=="")
						table.rows[2].cells[3].innerHTML="篮球";
					else
					{
						table.rows[2].cells[3].innerHTML=str+",篮球";
					}
				}
				if(job.options[1].selected==true)
					table.rows[2].cells[4].innerHTML="教师";
				if(job.options[2].selected==true)
					table.rows[2].cells[4].innerHTML="电器工程师";
				if(job.options[3].selected==true)
					table.rows[2].cells[4].innerHTML="财务";
				if(job.options[4].selected==true)
					table.rows[2].cells[4].innerHTML="自由职业";
			}
			if(name.value=="李四")
			{
				
				//alert(table.rows[0].cells[0].innerHTML);
				//table.rows[1].cells[1].innerHTML="";
				//alert(password.value);
				table.rows[3].cells[1].innerHTML=password.value;
				if(nan.checked==true)
					table.rows[3].cells[2].innerHTML="男";
				if(nv.checked==true)
					table.rows[3].cells[2].innerHTML="女";
				//alert(table.rows[1].cells[3].innerHTML);
				table.rows[3].cells[3].innerHTML="";
				//alert(table.rows[1].cells[3].innerHTML);
				if(youyong.checked==true)
				{
					
					if(table.rows[3].cells[3].innerHTML=="")
						{
							//alert(table.rows[1].cells[3].innerHTML);
							table.rows[1].cells[3].innerHTML="游泳";
							//alert(table.rows[1].cells[3].innerHTML);
						}
					else
					{
						table.rows[3].cells[3].innerHTML=str+",游泳";
					}
				}
				if(yuedu.checked==true)
				{
					var str=table.rows[3].cells[3].innerHTML;
					if(str=="")
						table.rows[3].cells[3].innerHTML="阅读";
					else
					{
						table.rows[3].cells[3].innerHTML=str+",阅读";
					}
				}
				if(lanqiu.checked==true)
				{
					var str=table.rows[3].cells[3].innerHTML;
					if(str=="")
						table.rows[3].cells[3].innerHTML="篮球";
					else
					{
						table.rows[3].cells[3].innerHTML=str+",篮球";
					}
				}
				if(job.options[1].selected==true)
					table.rows[3].cells[4].innerHTML="教师";
				if(job.options[2].selected==true)
					table.rows[3].cells[4].innerHTML="电器工程师";
				if(job.options[3].selected==true)
					table.rows[3].cells[4].innerHTML="财务";
				if(job.options[4].selected==true)
					table.rows[3].cells[4].innerHTML="自由职业";
			}
    }
    
    </script>
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
     <table id="utable" border="1">
     		<tr id="zhangsan">
    			<td>用户名</td>
    			<td>密码</td>
    			<td>性别</td>
    			<td>爱好</td>
    			<td>工作</td>
    			<td>操作</td>
    		</tr>
    		<tr>
    			<td>张三</td>
    			<td>123456</td>
    			<td>男</td>
    			<td>阅读,篮球</td>
    			<td>自由职业</td>
    			<td><input type="button" value="修改" onclick="editUser(this);"/></td>
    		</tr>
    		<tr>
    			<td>李娜</td>
    			<td>111111</td>
    			<td>女</td>
    			<td>游泳</td>
    			<td>财务</td>
    			<td><input type="button" value="修改" onclick="editUser(this);"/></td>
    		</tr>
    		<tr>
    			<td>李四</td>
    			<td>111564</td>
    			<td>男</td>
    			<td>游泳,篮球</td>
    			<td>教师</td>
    			<td><input type="button" value="修改" onclick="editUser(this);"/></td>
    		</tr>
     </table>
     <p></p>
     <form action="formResult.html" name="userForm" method="get">
    	<table>
    		<tr>
    			<td>用户名：</td>
    			<td><input id =uname type="text" name="userName" value=""/></td>
    		</tr>	
    		<tr>
    			<td>密码：</td>
    			<td><input id =upass type="password" name="userPwd" value=""/></td>
    		</tr>
    		<tr>
    			<td>性别：</td>
    			<td><input id= unan type="radio" name="userSex" value="0" >男 
    				<input id= unv type="radio" name="userSex" value="1" >女 </td>
    		</tr>
    		<tr>
    			<td>爱好：</td>
    			<td><input  id=uyuedu type="checkbox" name="relax" value="0" >阅读
    				<input  id=uyouyong type="checkbox" name="relax" value="1">游泳
    				<input  id=ulanqiu type="checkbox" name="relax" value="2" >篮球</td>
    		</tr>  
    		<tr>
    			<td>工作：</td>
    			<td><select id=ujob name="job" >  <!-- size="5" multiple -->
    					<option value="">请选择职业</option>
    					<option value="1">教师</option>
    					<option value="2" >电器工程师</option>
    					<option value="3" >财务</option>
    					<option value="4">自由职业</option>
    			    </select></td>
    		</tr>   
    		<tr>
    			<td colspan="2" align="center"> 
    			<input type="reset" value="清空" />
    			<input type="button" value="保存" onclick="saveUser();"/></td>
    		</tr>
    	</table>
    </form>
  </body>
</html>
